// 多边形弹框、
<template>
    <Modal v-on:hidden="$emit('hidden')" style="z-index: 999">
        <div class="polygon flexC flex1 AlignItemsC JustifyContentC">
            <!-- 弹窗点击关闭事件 -->
            <p><img src="../assets/img/components/close.png" alt="" class="imgBtn_close"
                    @click="$emit('hidden')"></p>
          <div class="flex1 font_s40 polygon_title textC flex JustifyContentC colorF"
               style="text-align: center;justify-content: center;align-items: center;display: flex">
            <img class="verticM"
                 style="height: 3rem;margin-right: 1rem"
                 src="../assets/img/components/12.png" />
            {{title}}
            <img class="verticM"
                 style="height: 3rem;margin-left: 1rem"
                 src="../assets/img/components/13.png" />
          </div>
            <div class="modal_box flexC">
                <!-- 从父组件传递 title 值作为此组件的列表标题 -->
                <div class="polygon_content flex1">
                    <slot></slot>
                </div>
            </div>
        </div>
    </Modal>
</template>
<script>
import Modal from './Modal'
export default {
  name: 'ModalList',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  components: {
    Modal
  }
}
</script>
<style lang="scss" scoped>
.polygon{
    width: 90%;
    height: 90%;
    position: absolute;
    top: 5%;
    left: 5%;
    background: url(../assets/img/components/bg.png) no-repeat;
    background-size: 100% 100%;
    color: white;
    z-index: 99999;
    .imgBtn_close {
        cursor: pointer;
        position: absolute;
        top:5%;
        right: 3%;
        z-index: 99999;
    }
    .polygon_title {
        font-size: 2.275rem;
        line-height: 2.875rem;
        margin-bottom: 2.325rem;
        margin-top:1rem;
    }
    .modal_box {
        // padding:2rem 3rem 3rem 3rem;
        width: 98%;
        height: 83%;
        .polygon_content {
             padding: 1%;
        }
    }
}
</style>
